doctype html
html
  head
    title app自动下载相关素材工具
    script(src="https://static.dayclover.com/quickapp-dp-h5/axios.js")
    style.
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
      }
      .container {
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        max-width: 100%;
        height: 400px;
      }
      .row {
        display: flex;
        gap: 10px;
      }
      input[type="text"] {
        flex: 1;
        padding: 8px 10px;
        font-size: 14px;
      }
      button {
        background-color: #28a745;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 5px;
        cursor: pointer;
      }
      button:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
        opacity: 0.7;
      }
      .loading {
        display: none;
        margin-top: 10px;
        color: #007bff;
      }
      .error { color: red; margin-top: 10px; }
      .success { color: #28a745; margin-top: 10px; }
    script.
      let searching = false;
      function doSearch() {
        if (searching) return;
        const input = document.getElementById('keyword');
        const keyword = (input.value || '').trim();
        if (!keyword) {
          alert('请输入产品名');
          return;
        }
        searching = true;
        const searchBtn = document.getElementById('searchBtn');
        searchBtn.disabled = true;
        searchBtn.textContent = '搜索中...';
        document.getElementById('loading').style.display = 'block';
        document.getElementById('error').innerText = '';
        document.getElementById('success').innerText = '';
        document.getElementById('downloadLink').style.display = 'none';
        axios.post('/search-materials', { keyword })
          .then(res => {
            const data = res.data || {};
            if (data.code === 200 && data.downloadUrl) {
              document.getElementById('success').innerText = '处理完成，可下载压缩包';
              const a = document.getElementById('downloadLink');
              a.href = data.downloadUrl;
              a.style.display = 'inline-block';
            } else {
              document.getElementById('error').innerText = data.msg || '处理失败';
            }
          })
          .catch(err => {
            document.getElementById('error').innerText = '请求出错，请稍后重试';
          })
          .finally(() => {
            searching = false;
            searchBtn.disabled = false;
            searchBtn.textContent = '搜索';
            document.getElementById('loading').style.display = 'none';
          });
      }
  body
    .container
      h1 app自动下载相关素材工具
      .row
        input#keyword(type="text" placeholder="请输入产品名，如：微信")
        button#searchBtn(type="button" onclick="doSearch()") 搜索
      div#loading.loading 正在搜索与下载素材，请稍候...
      div#error.error
      div#success.success
      a#downloadLink(href="#" style="display:none;margin-top:10px;") 下载所有素材ZIP